<template>
    <div class="table-wrap">
        <table>
            <colgroup>
                <col v-for="c in column" :key="c.dataIndex" class="col" />
            </colgroup>
            <thead>
                <tr>
                    <th v-for="c in column">{{ c.title }}</th>
                </tr>
            </thead>
            <tbody ref="body">
                <tr v-for="(record, order) in visibleData" :key="record.id">
                    <td v-for="cell in column" :key="cell.dataIndex">
                        <span v-if="cell.dataIndex === 'order' && order === 0">
                            <img
                                class="icon-rank"
                                src="../../../assets/icon_rank_1.png"
                            />
                        </span>
                        <span
                            v-else-if="
                                cell.dataIndex === 'order' && order === 1
                            "
                        >
                            <img
                                class="icon-rank"
                                src="../../../assets/icon_rank_2.png"
                            />
                        </span>
                        <span
                            v-else-if="
                                cell.dataIndex === 'order' && order === 2
                            "
                        >
                            <img
                                class="icon-rank"
                                src="../../../assets/icon_rank_3.png"
                            />
                        </span>
                        <span v-else-if="cell.dataIndex === 'order'">
                            {{ order + 1 }}
                        </span>
                        <span
                            class="tag severe-congestion"
                            v-else-if="
                                cell.dataIndex === 'congestion' &&
                                record[cell.dataIndex] > 2.5
                            "
                            ><span>{{ record[cell.dataIndex] }}</span></span
                        >
                        <span
                            class="tag congestion"
                            v-else-if="
                                cell.dataIndex === 'congestion' &&
                                record[cell.dataIndex] > 1.8 &&
                                record[cell.dataIndex] <= 2.5
                            "
                            ><span>{{ record[cell.dataIndex] }}</span></span
                        >
                        <span
                            class="tag slow"
                            v-else-if="
                                cell.dataIndex === 'congestion' &&
                                record[cell.dataIndex] > 1.5 &&
                                record[cell.dataIndex] <= 1.8
                            "
                            ><span>{{ record[cell.dataIndex] }}</span></span
                        >
                        <span
                            class="tag unimpeded"
                            v-else-if="
                                cell.dataIndex === 'congestion' &&
                                record[cell.dataIndex] <= 1.5
                            "
                            ><span>{{ record[cell.dataIndex] }}</span></span
                        >
                        <span
                            class="type"
                            v-else-if="
                                cell.dataIndex === 'type' &&
                                record[cell.dataIndex] === '突发'
                            "
                        >
                            <span>{{ record[cell.dataIndex] }}</span>
                            <img src="../../../assets/icon_arrow_upwards.png" />
                        </span>
                        <span
                            class="type"
                            v-else-if="
                                cell.dataIndex === 'type' &&
                                record[cell.dataIndex] === '畅通'
                            "
                        >
                            <span>{{ record[cell.dataIndex] }}</span>
                            <img
                                src="../../../assets/icon_arrow_downwards.png"
                            />
                        </span>
                        <span v-else>{{ record[cell.dataIndex] }}</span>
                    </td>
                </tr>
                <!-- <tr :style="{ background: 'red' }">
          <td v-for="cell in column" :key="cell.dataIndex">{{ tailData?.[cell.dataIndex] }}</td>
        </tr> -->
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";

const { data } = defineProps<{
    data: any[];
}>();

const column = [
    {
        title: "排行",
        dataIndex: "order",
    },
    {
        title: "干线名称",
        dataIndex: "name",
    },
    {
        title: "拥堵指数",
        dataIndex: "congestion",
    },
    {
        title: "车辆延误",
        dataIndex: "avgDelay",
    },
    {
        title: "拥堵类型",
        dataIndex: "congestionType",
    },
];

const size = 6;
const len = computed(() => data.length);

const start = ref(0);
const end = computed(() => {
    const e = start.value + size;
    return e >= len.value ? len.value : e;
});
const visibleData = computed(() => {
    return data.slice(start.value, end.value);
});
// const tailData = computed(() => {
//   return data[end.value]
// })
</script>

<style scoped lang="scss">
.table-wrap {
    table {
        width: 100%;
        border-collapse: collapse; // 消除单元格之间的间隔

        thead {
            background: rgba(255, 255, 255, 0.17);
            th {
                padding: 5px 0;
            }
        }

        tbody {
            text-align: center;
            td {
                padding: 6px 0;
            }
        }
    }
}
.icon-rank {
    width: 20px;
    height: 24px;
}

.tag {
    padding: 0 12px;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    line-height: 20px;
    &.severe-congestion {
        color: #ff0404;
        border-color: #ff0404;
    }
    &.congestion {
        color: #ff606b;
        border-color: #ff606b;
    }
    &.slow {
        color: #ff7a3e;
        border-color: #ff7a3e;
    }
    &.unimpeded {
        color: #4bf99b;
        border-color: #4bf99b;
    }
}
.type {
    display: inline-flex;
    align-items: center;
    img {
        width: 14px;
        height: 14px;
        margin-left: 2px;
    }
}
</style>
